<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>高速路况播报</title>
    <link rel="stylesheet" href="<c:url value='/resource/wechat/css/frozen.css'></c:url>">
    <link rel="stylesheet" href="<c:url value='/resource/wechat/css/main.css'></c:url>">
</head>
<style type="text/css">
    .sslk_more {
        width: 98%;
        float: left;
        margin-left: 1%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        -webkit-font-smoothing: antialiased;
        font-size: 0.95rem;
        color: #aba0a0;
        clear: both;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .sslk_more a {
        text-decoration: none;
    }
</style>
<body class="body_bg" ontouchstart>
<section class="ui-container">

    <div id="situation_div">
        <!--高速路况播报-->

        <c:if test="${highwayNameList=='0'}">
        <div class="sslk_more" style="cursor: pointer;"
        >无相关信息
        </div>
        </c:if>
        <c:if test="${highwayNameList!='0'}">

        <c:forEach var="situation" items="${highwayNameList}">
        <c:if test="${situation.type == '1'}">
        <div class="clwz_main">
            </c:if>
            <c:if test="${situation.type == '2'}">
            <div class="clwz_main gb">
                </c:if>
                <c:if test="${situation.type == '3'}">
                <div class="clwz_main yd">
                    </c:if>
                    <h1 class="h1">${situation.title}</h1>
                    <p class="time">${situation.begintime}</p>
                    <p class="t_main">${situation.content}</p>
                </div>
                </c:forEach>
            </div>

            <div class="sslk_more" style="cursor: pointer;"
                 onclick="more(this)">加载更多
            </div>
            </c:if>

</section>
</body>
<script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
<script type="text/javascript">

    var currentPage = 0;
    var search_hsKey = "";
    var search_rtKey = "";
    var search_hnKey = "";

    $(function () {
//    beforeShow();
        currentPage = 1;

        $(".gslk .act").click(function () {
            $(this).addClass("hov").siblings().removeClass("hov");
            var i = $(this).index();
            $(".gslk_main").eq(i).slideDown().siblings(".gslk_main").hide()
        })
        $(".gslk_main > li").click(function () {
            $(this).parent(".gslk_main").slideUp();
            $(".gslk > .act").removeClass("hov");

        })
        $("#highwaySituation > li").click(function () {
            $(this).parent(".gslk_main").slideUp();
            $(".gslk > .act").removeClass("hov");

        })

        $(".updown").click(function () {
            $(this).parent(".gslk_main").slideUp();
        })
        <%--$("#highwaySituation").html("${highwaySituation}");--%>
        <%--$("#releaseTime").html("${releaseTime}");--%>
        <%--${"#highwayName"}.html("${highwayName}");--%>
    })


    //  function beforeShow(){
    //    $(".t_main").each(function(i) {
    //      var intro = $(this).text();
    //      var introLen = intro.length;
    //      if (50 < introLen) {
    //        $(this).text(intro.substring(0, 35) + "...");
    //      }
    //    });
    //    $(".label").each(function(i) {
    //      var intro = $(this).text();
    //      var introLen = intro.length;
    //      if (11 < introLen) {
    //        $(this).text(intro.substring(0, 10) + "...");
    //      }
    //    });
    //  }

    //    function changeHskey(hsKey) {
    //        search_hsKey = hsKey;
    //        if (search_hsKey == "10") {
    //            $("#highwaySituation").html("入口关闭");
    //        } else if (search_hsKey == "20") {
    //            $("#highwaySituation").html("通行正常");
    //        } else if (search_hsKey == "30") {
    //            $("#highwaySituation").html("交通拥堵");
    //        } else {
    //            $("#highwaySituation").html("全部");
    //        }
    //        loadMore(1, search_hsKey, search_rtKey, search_hnKey, 0);
    //    }
    //
    //    function changeRtkey(rtKey) {
    //        search_rtKey = rtKey;
    //        if (rtKey == "") {
    //            $("#releaseTime").html("全部");
    //        } else {
    //            $("#releaseTime").html("最近" + search_rtKey + "分钟路况");
    //        }
    //        loadMore(1, search_hsKey, search_rtKey, search_hnKey, 0);
    //    }
    //
    //    function changeHnkey(hnKey) {
    //        search_hnKey = hnKey;
    //        if (hnKey == "") {
    //            $("#highwayName").html("全部");
    //        } else {
    //            $("#highwayName").html(search_hnKey);
    //        }
    //        loadMore(1, search_hsKey, search_rtKey, search_hnKey, 0);
    //    }

    function more(obj) {
        $(obj).html("加载中");
        currentPage++;
        if (currentPage >${totalpage}) {
            $(".sslk_more").css("display", "block");
            $(".sslk_more").html("无更多数据");
        } else {
            loadMore(currentPage, search_hsKey, search_rtKey, search_hnKey, 1);
        }
    }
    function loadMore(page, hsKey, rtKey, hnKey, searchType) {
//      hnKey = encodeURI(encodeURI(hnKey));
        if (!page) {
            page = 1;
        }
        $.ajax({
            url: "<c:url value='/api/highspeed/list'/>?highwaySituation=" + hsKey + "&releaseTime=" + rtKey + "&highwayName=" + hnKey + "&pageindex=" + page,
            type: "get",
            timeout: 6000,
            dataType: "json",
            async: false,
            beforeSend: function () {
                $(".sslk_more").html("数据加载中");
            },
            success: function (data) {
                var list = data.list;
                console.log(list.length);
                if (list && list.length > 0) {
                    if(0 == searchType){
                        $("#situation_div").html("");}
                    $.each(list, function (i, v) {
                        var _highSitua = "";
                        if (v.type == "1") {
                            _highSitua = "<div class='clwz_main'>";
                        } else if (v.type == "2") {
                            _highSitua = "<div class='clwz_main gb'>";
                        } else if (v.type == "3") {
                            _highSitua = "<div class='clwz_main yd'>";
                        }
                        $("#situation_div").append(_highSitua + "<h1 class='h1'>" + v.title + "</h1><p class='time'>" + v.begintime + "</p><p class='t_main'>" + v.content + "</p></div>");
                    });
//          beforeShow();
                    if (data.totalPage > page) {
                        $(".sslk_more").css("display", "block");
                        $(".sslk_more").html("加载更多");
                    } else {
                        $(".sslk_more").css("display", "block");
                        $(".sslk_more").html("无更多数据");
                    }
                }
//        else if(0 == searchType){
//          $("#situation_div").html("<div style='text-align: center;height: 50px; line-height: 50px;'>未查询到结果</div>");
//          $(".sslk_more").css("display", "none");
//        }

            }
        });
    }

</script>


</html>